;(function () {
    // 获取WEB存储 
    let city_name = localStorage.getItem('city_name') || '请手动选择'
    $('.city .choose-city').html(city_name)
    // 切换城市移入显示
    $('.area .change-city').mouseover(function () {
        $('.area .box').show()
    })
    // 切换城市移出隐藏
    $('.area').mouseleave(function () {
        $('.area .box').hide()
    })
    // 标题特效
    $('.tab li').click(function () {
        let index = $(this).index()
        // 标题
        $(this).siblings().removeClass('cur')
        $(this).addClass('cur')
        // 内容
        $('.tab-content').hide()
        $('.tab-content').eq(index).show()
    })
    // 内容特效
    $('.tab-content').on('click', 'a', function () {
        // 数据
        let title = $(this).text()
        let index = $(this).parents('.tab-content').index()
        // 当前选中
        $('.tab-content')
            .eq(index - 1)
            .find('.city')
            .removeClass('cur')
        $(this).parents('.city').addClass('cur')
        // 标题
        $('.tab li')
            .eq(index - 1)
            .text(title)
        if (index == 3) return
        $('.tab li').removeClass('cur')
        $('.tab li').eq(index).addClass('cur')
        // 下一个显示
        $('.tab li').eq(index).show()
        $('.tab-content')
            .eq(index - 1)
            .hide()
        $('.tab-content').eq(index).show()
    })
    // 内容选中
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        $('.area .box').hide()
    })
    // 选择存储
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        localStorage.setItem('city_name', title)
        localStorage.setItem('city_id', areaId)
        // $('.city .choose-city').html(title)
        location.reload()
    })

      //默认省份数据
      $.get('/api/area/index.jsp', {
        type: '一级',
        pid: 1,
  
      }, res => {
        // console.log(res)
        let html = ''
        $.each(res.data, (index, item) => {
          html += `<div class="city" area-id="${item.area_id}">
          <a href="javascript:;">${item.area_name}</a>
          <span>-</span></div>`
        })
        $('.tab-content:eq(0)').html(html)
      }, 'json')
      //后续城市数据
      //绑定点击事件 事件委托
      $('.area .tab-content').on('click', 'a', function () {
        //准备参数
        let index = $(this).parents('.tab-content').index()
        if ([1, 2].indexOf(index) === -1) return
        let type = ['二级', '三级'][index - 1]
        let pid = $(this).parents('.city').attr('area-id')
        //请求接口
        $.get('/api/area/index.jsp', {
          type,
          pid,
  
        }, res => {
          // console.log(res)
          let html = ''
          $.each(res.data, (index, item) => {
            html += `<div class="city" area-id="${item.area_id}">
          <a href="javascript:;">${item.area_name}</a>
          <span>-</span></div>`
          })
          $(`.tab-content`).eq(index).html(html)
        }, 'json')
      })
})()
